<template>
  <div ref="echartRef" class="mapRef" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
// import * as echarts from 'echarts/core'
// import { PieChart } from 'echarts/charts'
// import {
//   TooltipComponent,
//   LegendComponent,
//   TitleComponent,
//   GraphicComponent,
// } from 'echarts/components'
// import { CanvasRenderer } from 'echarts/renderers'
import * as echarts from 'echarts'
// import chinaMap from '@/assets/map/china' // 引入 china 地图数据
import chinaJSON from '@/assets/map/china.json'
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
const echartRef = ref(null)
let mChart = null
let geoCoordMap = {
  台湾省: [121.5135, 25.0308],
  黑龙江省: [127.9688, 45.368],
  内蒙古自治区: [110.3467, 41.4899],
  吉林省: [125.8154, 44.2584],
  北京市: [116.4551, 40.2539],
  辽宁省: [123.1238, 42.1216],
  河北省: [114.4995, 38.1006],
  天津市: [117.4219, 39.4189],
  山西省: [112.3352, 37.9413],
  陕西省: [109.1162, 34.2004],
  甘肃省: [103.5901, 36.3043],
  宁夏回族自治区: [106.3586, 38.1775],
  青海省: [101.4038, 36.8207],
  新疆维吾尔自治区: [87.9236, 43.5883],
  西藏自治区: [91.11, 29.97],
  四川省: [103.9526, 30.7617],
  重庆市: [108.384366, 30.439702],
  山东省: [117.1582, 36.8701],
  河南省: [113.4668, 34.6234],
  江苏省: [118.8062, 31.9208],
  安徽省: [117.29, 32.0581],
  湖北省: [114.3896, 30.6628],
  浙江省: [119.5313, 29.8773],
  福建省: [119.4543, 25.9222],
  江西省: [116.0046, 28.6633],
  湖南省: [113.0823, 28.2568],
  贵州省: [106.6992, 26.7682],
  云南省: [102.9199, 25.4663],
  广东省: [113.12244, 23.009505],
  广西壮族自治区: [108.479, 23.1152],
  海南省: [110.3893, 19.8516],
  上海市: [121.4648, 31.2891],
}
// 注册中国地图
echarts.registerMap('china', chinaJSON)

onMounted(() => {
  mChart = echarts.init(echartRef.value)
  renderChart()
})
const renderChart = () => {
  const data = Object.entries(props.data).map(([name, value]) => ({ name, value }))
  // console.log('data', data)
  // var data = [
  //   { name: '北京', value: 199 },
  //   { name: '天津', value: 42 },
  //   { name: '河北', value: 102 },
  //   { name: '山西', value: 81 },
  //   { name: '内蒙古', value: 47 },
  //   { name: '辽宁', value: 67 },
  //   { name: '吉林', value: 82 },
  //   { name: '黑龙江', value: 123 },
  //   { name: '上海', value: 24 },
  //   { name: '江苏', value: 92 },
  //   { name: '浙江', value: 114 },
  //   { name: '安徽', value: 109 },
  //   { name: '福建', value: 116 },
  //   { name: '江西', value: 91 },
  //   { name: '山东', value: 119 },
  //   { name: '河南', value: 137 },
  //   { name: '湖北', value: 116 },
  //   { name: '湖南', value: 114 },
  //   { name: '重庆', value: 91 },
  //   { name: '四川', value: 125 },
  //   { name: '贵州', value: 62 },
  //   { name: '云南', value: 83 },
  //   { name: '西藏', value: 9 },
  //   { name: '陕西', value: 80 },
  //   { name: '甘肃', value: 56 },
  //   { name: '青海', value: 10 },
  //   { name: '宁夏', value: 18 },
  //   { name: '新疆', value: 180 },
  //   { name: '广东', value: 123 },
  //   { name: '广西', value: 59 },
  //   { name: '海南', value: 14 },
  // ]
  var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name]
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        })
      }
    }
    return res
  }
  const option = {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: 'rgba(35, 34, 33, 1)', // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(54, 54, 54, 0.64)', // 100% 处的颜色
        },
      ],
      globalCoord: false, // 缺省为 false
    },

    visualMap: {
      show: false,
      min: 0,
      max: 500,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本，默认为数值文本
      calculable: true,
      seriesIndex: [1],
      inRange: {},
    },
    geo: {
      map: 'china',
      show: true,
      roam: true,
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      itemStyle: {
        normal: {
          areaColor: '#E49788',
          borderColor: '#FDB5A0', //线
          borderWidth: 2,
          shadowColor: '#9A5642', //外发光
          shadowBlur: 10,
        },
        emphasis: {
          areaColor: '#ab6658', //悬浮区背景
        },
      },
      zoom: 1.8, //初始缩放比
      center: [104.5, 36], //初始中心点
    },
    series: [
      {
        type: 'map',
        map: 'china',
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff',
            },
          },
        },
        roam: true,
        itemStyle: {
          normal: {
            // areaColor: '#E49788',
            // borderColor: '#FFFFFF',
          },
          emphasis: {
            areaColor: '#2B91B7',
          },
        },
        animation: false,
        data: convertData(data),
      },
      {
        name: 'light',
        type: 'scatter',
        coordinateSystem: 'geo',
        // symbolSize: 5,
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true,
            color: '#fff',
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            color: '#fff',
          },
        },
        data: convertData(data),
      },

      {
        name: 'Top 5',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [50, 50],
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 9,
            },
            formatter(value) {
              return value.data.value[2]
            },
          },
        },
        itemStyle: {
          normal: {
            // color: '#EF7060', //标志颜色
            color: '#B5421F',
          },
        },
        data: convertData(data),
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
        },
        hoverAnimation: true,
        zlevel: 1,
      },
    ],
  }
  //设置配置项
  mChart.setOption(option)
}
watch(
  () => props.data,
  () => {
    renderChart()
  },
)
</script>
<style lang="scss" scoped>
.mapRef {
  width: 900px;
  height: 800px;
}
</style>
